<template>
  <div class="form-data-table">
    <div class="form-data-export">
      <el-button-group>
        <el-button
          size="small"
          :type="markIsExport == 2 ? 'primary' : 'default'"
          @click="handleIfIsExport(2)"
          >全部</el-button
        >
        <el-button
          size="small"
          :type="markIsExport == 0 ? 'primary' : 'default'"
          @click="handleIfIsExport(0)"
          >未读</el-button
        >
        <el-button
          size="small"
          :type="markIsExport == 1 ? 'primary' : 'default'"
          @click="handleIfIsExport(1)"
          >已读</el-button
        >
      </el-button-group>

      <el-collapse-transition>
        <el-button
          v-show="selectSiteLists.length > 0"
          style="margin-left: 12px"
          size="small"
          icon="Download"
          round
          @click="handleDownload"
          >导出</el-button
        >
      </el-collapse-transition>
      <el-input
        style="width: 120px"
        class="margin-left-10"
        v-model="searchUid"
        size="small"
        placeholder="输入uid搜索"
      />
      <!-- <el-input style="width:120px" class="margin-left-10" v-model="searchTel" size="small" placeholder="输入电话搜索"/>
      <el-input style="width:120px" class="margin-left-10" v-model="searchUserName" size="small" placeholder="输入用户名搜索"/> -->
      <!-- <el-date-picker
        style="margin-left:12px;"
        v-model="sdate_edate"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']">
    </el-date-picker> -->
      <el-button style="margin-left: 12px" size="small" @click="onSearch">搜索</el-button>
      <el-button style="margin-left: 12px" size="small" @click="onClear">清除</el-button>

      <iframe
        src=""
        ref="iframe"
        style="position: absolute; visibility: hidden; height: 0"
      ></iframe>
    </div>

    <el-table
      v-show="formDataTable.columesList && formDataTable.columesList.length > 0"
      style="width: 100%"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <template
        v-for="(item, index) in formDataTable.columesList"
        :key="item + '_' + index"
      >
        <el-table-column
          v-if="item.indexOf('upload') != -1"
          :prop="item"
          :label="'图片' + item.slice(7, item.length)"
          :data-a="index"
          :width="formDataWidthMap[item]"
        >
          <template #default="scope">
            <span
              :class="{
                'form-data-item': item == '0_序号',
                'new-msg-single': item == '0_序号' && scope.row['is_export'] == 0,
              }"
            >
              {{ scope.row && scope.row[item] }}
            </span>
            <el-button size="small" @click="onLookImg(scope.column, scope.row)"
              >查看图片</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.indexOf('img') != -1"
          :prop="item"
          :label="'图片' + item.slice(5, item.length)"
          :data-a="index"
          :width="formDataWidthMap[item]"
        >
          <template #default="scope">
            <span
              :class="{
                'form-data-item': item == '0_序号',
                'new-msg-single': item == '0_序号' && scope.row['is_export'] == 0,
              }"
            >
              {{ scope.row && scope.row[item] }}
            </span>
            <el-button size="small" @click="onLookImg(scope.column, scope.row)"
              >查看图片</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item != 'is_export'"
          :prop="item"
          :label="item"
          :data-a="index"
          :width="formDataWidthMap[item]"
        >
          <template #default="scope">
            <span
              :class="{
                'form-data-item': item == '0_序号',
                'new-msg-single': item == '0_序号' && scope.row['is_export'] == 0,
              }"
            >
              {{ scope.row && scope.row[item] }}
            </span>
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed="right" label="操作" width="54">
        <template #default="scope">
          <el-button
            @click.prevent="onMarkRow(scope.$index, tableData)"
            type="text"
            size="small"
            >标记</el-button
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="54">
        <template #default="scope">
          <el-button
            @click.prevent="onDeleteRow(scope.$index, tableData)"
            type="text"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="预览图片"
      v-model="dialogVisible"
      width="60%"
      :before-close="onClose"
    >
      <el-image :src="previewImgUrl" :preview-src-list="previewImgUrls">
        <template #placeholder>
          <div class="image-slot">加载中<span class="dot">...</span></div>
        </template>
      </el-image>
    </el-dialog>
    <NoData
      v-show="!formDataTable.columesList || formDataTable.columesList.length <= 0"
    ></NoData>

    <el-pagination
      v-show="formDataTable.columesList && formDataTable.columesList.length > 0"
      class="pagination"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :page-count="formDataTable.totalPage || 0"
      :current-page="curPage"
      @current-change="onCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import NoData from "./no-data.vue";
import { reactive } from "vue";
import { useWebDataAnalysisStore } from "@/store/web/data-analysis";
const useWebDataAnalysis = useWebDataAnalysisStore();
const formDataWidthMap = {
  "0_序号": 70,
  "1_uid": 100,
  "2_创建时间": 150,
  is_export: 30,
};
export default {
  setup() {
    const state = reactive({
      selectSiteLists: [], // 勾选项
      previewImgUrls: [],
      dialogVisible: false,
      previewImgUrl: "",
      markIsExport: 2, // 已读：1 / 未读：0 / 全部：2
      searchUid: "",
      searchTel: "",
      searchUserName: "",
    });
    const state_ = {
      curPage: 1,
      pageSize: 20,
      sdate_edate: "",
      pickerDate: null,
      formDataWidthMap: formDataWidthMap,
    };
    _.merge(state, state_);
    return state;
  },
  components: {
    NoData,
  },
  computed: {
    formDataTable() {
      return useWebDataAnalysis.formDataTable;
    },
    tableData() {
      // return this.formDataTable.siteList;
      let searchUid = this.searchUid.trim();
      return (
        this.formDataTable.siteList &&
        this.formDataTable.siteList.filter(
          (data) => !searchUid || data["1_uid"] == searchUid
        )
      );
    },
  },
  beforeMount() {
    this.getFormDataList(this.$route.query.site_id, this.curPage, this.pageSize);
  },
  mounted() {},
  methods: {
    onMarkRow(index, rows) {
      useWebDataAnalysis.markFormItem({
        site_id: this.$route.query.site_id,
        id: rows[index]["0_序号"],
        index,
      });
    },
    onDeleteRow(index, rows) {
      useWebDataAnalysis.deleteFormItem({
        site_id: this.$route.query.site_id,
        id: rows[index]["0_序号"],
        index,
      });
    },
    onClose() {
      this.previewImgUrl = "";
      this.previewImgUrls[0] = "";
      this.dialogVisible = false;
    },
    onLookImg(column, row) {
      this.dialogVisible = true;
      this.previewImgUrl = row[column.property];
      this.previewImgUrls[0] = this.previewImgUrl;
    },
    getFormDataList(site_id, page, pageSize, is_export) {
      //uid  sdate edate
      useWebDataAnalysis.getFormDataTable({
        site_id: site_id,
        page: page,
        pageSize: pageSize,
        is_export: is_export == 2 ? "" : is_export,
        uid: this.searchUid,
        tel: this.searchTel,
        name: this.searchUserName,
        sdate: this.sdate_edate[0] ? this.sdate_edate[0] : "",
        edate: this.sdate_edate[1] ? this.sdate_edate[1] : "",
      });
    },
    onSearch() {
      this.getFormDataList(
        this.$route.query.site_id,
        this.curPage,
        this.pageSize,
        this.markIsExport
      );
    },
    onClear() {
      this.onCurrentChange(1);
    },
    onCurrentChange(val) {
      this.searchUid = "";
      this.searchTel = "";
      this.searchUserName = "";
      this.searchUid = "";
      this.sdate_edate = "";
      this.curPage = val;
      this.getFormDataList(
        this.$route.query.site_id,
        this.curPage,
        this.pageSize,
        this.markIsExport
      );
    },
    handleSelectionChange(val) {
      // 暂存勾选项
      this.selectSiteLists = [...val];
    },
    handleDownload() {
      // 根据 ids 导出数据
      let selectIds = "";
      const idLists =
        this.selectSiteLists &&
        this.selectSiteLists.map((item) => {
          return item["0_序号"];
        });
      if (idLists.length <= 0) return;
      selectIds = idLists.join(",");
      this.$refs.iframe.src =
        this.env.apiUrl +
        "/stat/expdata?site_id=" +
        this.formDataTable.site_id +
        "&table=com_form&ids=" +
        selectIds;

      // 更新 formDataTable
      // const newSelectLists = this.selectSiteLists.filter((item) => {
      //   item['is_export'] = '1';
      //   return item;
      // });
      useWebDataAnalysis.updateFormDataTable(this.selectSiteLists);
    },
    handleIfIsExport(is_export) {
      this.markIsExport = is_export;
      this.curPage = 1;
      this.getFormDataList(
        this.$route.query.site_id,
        this.curPage,
        this.pageSize,
        is_export
      );
    },
  },
};
</script>
<style lang="scss" scope>
.el-range-editor.el-input__inner,
.el-date-editor .el-range-separator,
.el-date-editor .el-range__icon {
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  font-size: 12px;
  padding: 0;
}
.el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: 340px;
}
.el-image {
  width: 100%;
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-image__error,
.el-image__inner,
.el-image__placeholder {
  object-fit: contain;
  height: 500px;
}
.form-data-table {
  padding-bottom: 30px;

  .el-table {
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(18, 123, 255, 0.1);

    .el-table__header {
      tr {
        background-color: #e4e7eb;

        th:first-child::before {
          display: none;
        }
      }

      th {
        font-size: 14px;
        background-color: #e4e7eb;
        color: #43475c;
        font-weight: normal;
      }
    }

    .el-table__header,
    .el-table__body {
      tr {
        position: relative;

        td:nth-child(1),
        th:nth-child(1) {
          div {
            text-align: center;
          }
        }
      }
    }
  }

  .pagination {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 45px;
  }
}

.form-data-export {
  padding-bottom: 10px;
}

.new-msg-single {
  position: relative;
  // display: block;
  // background-color: rgba(255, 0, 0, .2);
}
.new-msg-single::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 105%;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #ff0000;
}
</style>
